<template>
  <div class="article-root" v-loading="!isLogin" element-loading-text="未登陆无法使用" element-loading-spinner="iconfont icon-jujue">
    <div class="article-left">
      <div class="add-btn" @click="addShow">
        ADD
      </div>

      <div class="tree-table">
        <folder ref="refFolder" :fType="2" @getCurrentFolder="currentFolder"></folder>
      </div>
    </div>

    <div class="article-main">
      <el-card
        class="article"
        shadow="hover"
        v-for="art of articleList" :key="art.articleId">

        <div class="article-title"
           :style="
           art.name.length >= 40 ? {fontSize:'11px'} :
           art.name.length >= 24 ? {fontSize:'14px'} : {fontSize:'18px'}
          "
        >
          <div style="height: 25px;">{{art.name}}</div>
          <div class="article-title-state">
            <div v-if="art.top      === 'Y'" class="state">Top</div>
            <div v-if="art.pubState === 'Y'" class="state">Online</div>
            <div v-if="art.pubState === 'Y' && art.version !== art.versionCloud" class="state">Mdf</div>
          </div>
          <div class="article-title-webview" @click="toWeb(art)"><i class="iconfont icon-web"></i></div>
          <div class="article-title-qrcode"  @click="downloadQrCode(art)"><i class="iconfont icon-qrcode"></i></div>
        </div>
        <div class="article-body" v-html="art.contentHtml">
          {{art.contentHtml}}
        </div>

        <!-- 工具栏 -->
        <div class="toolbar">
          <div class="toolbar-north">
            <div class="toolbar-north-left">
              <i class="iconfont icon-doctask view-icon" @click="toView(art.articleId)" @contextmenu.prevent="toNewView(art.articleId)"></i>
            </div>
            <div class="toolbar-north-right">
              <i class="iconfont icon-docedit view-icon" @click="toEditor(art.articleId)"></i>
            </div>
          </div>

          <div class="toolbar-btn-group">
            <div class="btn-item hits    right-border "><i class="iconfont icon-hits5"></i><span>{{art.hits}}</span></div>
            <div class="btn-item pviews  right-border "><i class="iconfont icon-read2"></i><span>{{art.pViews}}</span></div>
            <div class="btn-item applaud right-border-thick"><i class="iconfont icon-applaud3"></i><span>{{art.applaud}}</span></div>

            <div class="btn-item operation download right-border" @click="download(art)">
              <i class="iconfont icon-download1"></i>
              <span style="font-size: 8px;">下载</span>
            </div>
            <div class="btn-item operation edit     right-border" @click="updShow(art)">
              <i class="el-icon-edit-outline" style="font-size: 19px;margin-top: 1px;"></i>
              <span style="font-size: 8px;">修改</span>
            </div>
            <div class="btn-item operation publish  right-border" @click="publish(art)">
              <i class="el-icon-s-promotion" style="font-size: 19px"></i>
              <span style="font-size: 8px;">发布</span>
            </div>
            <div class="btn-item operation abolish"               @click="abolish(art)">
              <i class="iconfont icon-repeal"></i>
              <span style="font-size: 8px;">下线</span>
            </div>
          </div>
        </div>

      </el-card>
    </div>

    <el-drawer
        direction="rtl"
        class="bjs-drawer"
        :title="infoTitle"
        :modal="false"
        :visible.sync="article.visible">
      <articleInfo ref="refArticleInfo" :readOnly="false" @refreshArticle="findList"></articleInfo>
    </el-drawer>

    <el-dialog
      width="30%"
      class="bjs-dialog"
      :visible.sync="article.qrCodeVisible">
      <img :src="article.qrCode" style="height: 210px;width: 200px;">
      <div>{{articleLink.name}}</div>
    </el-dialog>
  </div>
</template>

<script>
import { shell,ipcRenderer } from 'electron'
import folder from '../folder/folder'
import articleInfo from "./info"
import { postPublishArticle, delAbolishArticle, getDraftList, getDownload, getQrCode, getWebUrl } from '../../../api/article'

export default {
  name: 'bjs-article',
  data () {
    return {
      articleList: [],
      articleParam: {
        folderId: -1,
        start: 0,
        limit: 999
      },
      infoTitle: 'Article',
      article: {
        visible: false,
        qrCodeVisible: false,
        qrCode : ''
      },
      articleLink: {
        name: '',
        url: ''
      }
    }
  },
  computed: {
    isLogin () {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS}
  },
  watch : {
    isLogin () {
      this.resetParam()
    }
  },
  methods: {
    currentFolder (folder) {
      this.articleParam.folderId = folder.folderId
      this.findList()
    },
    findList () {
      this.article.visible = false
      getDraftList(this.articleParam).then(resp => {
        this.articleList = resp.data
      })
    },
    resetParam () {
      this.articleList = []
    },
    updShow (article) {
      if (this.$refs.refArticleInfo) {
        this.$refs.refArticleInfo.loadingTrue()
      }
      this.infoTitle = article.name
      this.article.visible = true
      this.$nextTick(() => {
        this.$refs.refArticleInfo.updInit(article)
      })

    },
    addShow () {
      if (this.$refs.refArticleInfo) {
        this.$refs.refArticleInfo.loadingTrue()
      }
      this.infoTitle = 'New Article'
      this.article.visible = true
      this.$nextTick(() => {
        this.$refs.refArticleInfo.addInit()
      })
    },
    toView (articleId) {
      this.$router.push({name:'artView',params:{articleId:articleId}})
    },
    toNewView (articleId) {
      ipcRenderer.send('newWin',articleId)
    },
    toEditor(articleId) {
      this.$router.push({name:'md',params:{articleId:articleId}})
    },
    publish (article) {
      postPublishArticle({articleId:article.articleId}).then(() => {
        article.pubState = 'Y'
        article.versionCloud = article.version
        this.$bjsNotify.success('文章发布成功!')
      })
    },
    abolish (article) {
      delAbolishArticle({articleId:article.articleId}).then(() => {
        article.pubState = 'N'
        this.$bjsNotify.success('文章下线成功!')
      })
    },
    download (article) {
      getDownload ({articleId: article.articleId}).then(resp => {
        let a = document.createElement('a')
        let blob = new Blob([resp], {type: "text/plain"})
        let objectUrl = URL.createObjectURL(blob)
        a.setAttribute("href",objectUrl)
        a.setAttribute("download", article.name + '.md')
        a.click()
      })
    },
    downloadQrCode (article) {
      getQrCode({articleId:article.articleId}).then(resp => {
        this.articleLink.name = article.name
        let blob = new Blob([resp])
        this.article.qrCode = window.URL.createObjectURL(blob)
        this.article.qrCodeVisible = true
      })
    },
    toWeb (article) {
      getWebUrl({articleId:article.articleId}).then(resp => {
        shell.openExternal(resp.data)
      })
    }
  },
  mounted() {
    if (this.isLogin) {
      this.findList()
      this.$refs.refFolder.findFolderTree()
    }
  },
  activated() {
    // this.resetParam()
    // this.findList()
  },
  components: {
    folder, articleInfo
  }
}
</script>

<style scoped lang="scss">
  .article-root {
    @include boxBase(100%,100%);
    @include flex(row,flex-start);

    [data-theme="night"] & {
      background-color: $theme-bg-color-night;
    }

    .article-left {
      @include flex(column,space-between);
      min-width: 180px;
      max-width: 180px;
      height: 99%;
      margin: 0 0 0 20px;

      [data-theme="night"] & {
        background-color: $theme-bg-color-night;
      }

      .add-btn {
        @include boxBase(100%,8%);
        @include flex(column,center,center);
        font-size: 28px;
        font-weight: 900;
        color: #ffffff;
        /*font-family: Lato,sans-serif;*/
        margin-top: 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        cursor: pointer;
        background-color: $theme-color-light-7;
        transition: background-color 0.5s;

        [data-theme="night"] & {
          border: 0;
          color: #5a5a5a;
          background-color: $theme-bg-color-night;
          box-shadow: 0 0px 13px 5px rgba(0,0,0,.4);
        }

        &:hover {
          background-color: $theme-color-light-dark;
          [data-theme="night"] & {
            color:$theme-bg-color-night;
            background-color: $theme-color-night-dark;
          }
        }
      }

      .tree-table {
        @include boxBase(99%,92%);
        margin-bottom: 10px;
        overflow: hidden;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border: 1px solid $theme-color-light-5;
        border-top: 0;
        [data-theme="night"] & {
          width:  100%;
          border: 0;
          background-color: $theme-bg-color-night;
          box-shadow: 0 5px 13px 5px rgba(0,0,0,.4);
        }
      }
    }

    .article-main {
      @include boxBase(100%,96%);
      @include flex(row,flex-start,flex-start);
      overflow-y: scroll;
      padding-bottom: 20px;
      flex-flow: row wrap;
      align-content: flex-start;

      .article {
        @include boxBase(350px,250px);
        @include flex(column,flex-start);
        margin: 20px 0 0 20px;
        position: relative;
        border-radius: 10px;

        [data-theme="night"] & {
          border-color: $theme-bg-color-night;
          background-color: $theme-bg-color-night;
        }

        &:hover {
          border-radius: 10px;
          border: 1px solid rgba(160, 160, 160, 0.7);
          box-shadow: 0 5px 13px 5px rgba(0,0,0,.4);

          [data-theme="night"] & {
            box-shadow: 0 5px 13px 5px rgba(0,0,0,.9);
            border-color: #222222;
          }

          .article-body {
            filter: blur(2px);
            [data-theme="night"] & {
              filter: blur(1px);
            }
          }

          .toolbar,.article-title-qrcode,.article-title-webview {
            opacity:1 !important;
          }
        }

        /deep/ .el-card__body {
          padding: 0;
          height: 100%;
          border-radius: 15px;
        }

        .article-title {
          @include boxBase(100%,17%);
          @include flex(column,center,center);
          position: relative;
          font-weight: bold;
          color: $theme-color-light-dark;
          background-color: #f6f6f6;
          [data-theme="night"] & {
            color: $theme-color-night-dark-7;
            background-color: #1d1d1d;
          }

          .article-title-state {
            @include flex(row,center,center);
            .state {
              padding: 1px 5px;
              margin-right: 5px;
              letter-spacing: 1px;
              font-size: 10px;
              border-radius: 20px;
              color: #ffffff;
              background-color: $theme-color-light;
              [data-theme="night"] & {
                background-color: $theme-color-night-dark-7;
              }
            }
          }

          .article-title-qrcode, .article-title-webview {
            cursor: pointer;
            position: absolute;
            opacity: 0;
            transition: opacity 0.5s,color 0.3s;
            &:hover {
              color: $theme-color-light;
              [data-theme="night"] & {
                color: $theme-color-night;
              }
            }
          }
          .article-title-qrcode {
            right: 5px;
          }
          .article-title-webview {
            right: 28px;
          }

        }

        .article-body {
          position: relative;
          height: 100%;
          padding: 0 10px 0 10px;
          font-size: 12px;
          text-align: left;
          overflow: hidden;
          transition: filter 0.5s;

          [data-theme="night"] & {
            color: #606060;
            background-color: $theme-bg-color-night;
          }

          &:after {
            @include boxBase(100%,100%);
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            [data-theme="light"] & {
              box-shadow: inset 0px -100px 30px -15px #ffffff;
            }
            [data-theme="night"] & {
              box-shadow: inset 0px -50px 30px -15px #000000;
            }
          }
        }

        .toolbar {
          @include boxBase(100%,208px);
          @include flex(column,space-between,center);
          position: absolute;
          bottom: 0;
          opacity: 0;
          transition: opacity 0.5s;
          .toolbar-north {
            @include boxBase(100%,85%);
            @include flex(row,center,center);
            background-color: $theme-color-light-1;
            [data-theme="night"] & {
              background-color: $theme-color-night-1;
            }

            .view-icon {
              cursor: pointer;
              color: #767d80 !important;
              transition: color 0.3s;
              &:hover {
                color: #a68b00 !important;
              }
            }

            .toolbar-north-left, .toolbar-north-right {
              @include boxBase(50%,100%);
              @include flex(row,center,center);
            }
            .toolbar-north-left {
              border-right: 3px solid rgba(255, 255, 255, 0.30);
              [data-theme="night"] & {
                border-right: 3px solid rgba(143, 143, 143, 0.30);
              }
            }
          }

          .toolbar-btn-group {
            @include boxBase(100%,15%);
            @include flex(row,space-between,center);
            font-size: 11px;
            color: #ffd700;
            background-color: $theme-color-light-dark-7;

            [data-theme="night"] & {
              color: $theme-color-night-dark;
              background-color: $theme-bg-color-night;
            }

            .btn-item {
              @include flex(column,center,center);
              height: 100%;
              .btn {
                padding: 7px 10px;
              }
            }

            .right-border {
              border-right: 1px solid $theme-color-night-5;
              [data-theme="night"] & {
                border-right: 1px solid $theme-color-night-dark-1;
              }
            }
            .right-border-thick {
              border-right: 3px solid $theme-color-night-7;
              [data-theme="night"] & {
                border-right: 3px solid $theme-color-night-dark-1;
              }
            }

            // ---------- 按钮 ----------
            .hits,.pviews,.applaud {
              width: 16.6%;
              @include flex(row,center,center);
            }

            .download,.edit,.publish {
              width: 12.5%;
            }
            .abolish  {width: 12%;}

            .operation {
              font-size: 18px;
              font-weight: bold;
              cursor: pointer;
              transition: color 0.5s,background-color 0.5s;
              [data-theme="night"] & {
                color: $theme-color-night-dark;
              }
              i {
                font-size: 18px;
              }
              &:hover {
                color: #ffd700;
                background-color: $theme-color-light-dark;
                [data-theme="night"] & {
                  color: $theme-bg-color-night;
                  border-color: $theme-color-night-dark-1;
                  background-color: $theme-color-night-dark;
                }
              }
            }

          }
        }
      }
    }
  }

  @media screen and (min-height: 1100px) {
    .article {
      margin: 20px 0 0 10px !important;
    }
  }
</style>
